import React, { useState } from 'react'
import { Button, Image, Input } from 'antd'
import { API } from '../../config';
import { deleteItem, updateItem } from '../../helpers/cart';

function CarItem({product, setCart}) { 
  const [count,setCount] = useState(product.count)
  const handleChange = (ev) => {
    const count = parseInt(ev.target.value)
    setCount(count)
    setCart(updateItem(product._id, count))
  }
  return (
    <tr className="ant-table-row">
      <td className="ant-table-cell">
        <Image width={100} src={`${API}/product/photo/${product._id}`} />
      </td>
      <td className="ant-table-cell">{product.name}</td>
      <td className="ant-table-cell">{product.price}</td>
      <td className="ant-table-cell">{product.category.name}</td>
      <td className="ant-table-cell">
        <Input type='number' value={count} onChange={handleChange} />
      </td>
      <td className="ant-table-cell">
        <Button danger type='primary' onClick={() =>setCart(deleteItem(product._id)) }>删除</Button>
      </td>
    </tr>
  )
}

export default CarItem
